<template>
	<view>
		<view class="box_2">添加专业技能、职业证书或职称；最多可以添加6份证书</view>
		<u-field 
		placeholder-style="color:#757575;font-size:14px !important;" 
			v-model="name" 
			required 
			label="证书名称" 
			placeholder="请输入" 
			:clearable="false" 
			class="reset_after" 
		/>
		<view class="form-line u-border-bottom" @click="showPickerDate = !showPickerDate" >
			<view class="form-field">
				<view class="label">
					获得时间
				</view>
				<view :class="obtaintime ? 'text' : 'text ac'">
					{{obtaintime ? obtaintime : '请选择'}}
				</view>
			</view>
			<u-icon class="arrow-icon" name="arrow-right"></u-icon>
		</view>
		
		<u-picker 
			:default-time="obtaintime" 
			v-model="showPickerDate" 
			mode="time" 
			:params="dateParams" 
			title="选择获得时间" 
			:start-year="minDate"
			:end-year="maxDate" 
			@confirm="onConfirmDate" 
			@cancel="showPickerDate = false" 
		/>
		<view style="margin: 32rpx 32rpx 0;">
			<u-button shape="circle" type="primary" :disabled="disabled" @click="handleSubmit">
				保存
			</u-button>
		</view>
		<view class="box_1" v-if="parseInt(id) > 0" @click="delCertificateModalState=true">
			删除此证书
		</view>
		<u-top-tips ref="uTips"></u-top-tips>
		<u-modal v-model="delCertificateModalState" title="提示" content="确定删除该证书吗?" show-cancel-button
			@confirm="deleteCurrentCertificate" @cancel="delCertificateModalState=false"></u-modal>
	</view>
</template>

<script>
	import http from '@/utils/http'
	import api from '@/api'
	export default {
		name: 'EditCertificate',
		data() {
			return {
				delCertificateModalState: false,
				dateParams: {
					year: true,
					month: true,
					day: false,
					hour: false,
					minute: false,
					second: false
				},
				showPickerDate: false,
				currentDate: '',
				id: 0,
				name: '',
				obtaintime: '',
				minDate: '',
				maxDate: '',
				disabled:false
			}
		},
		onLoad(e) {
			// 获取路由中的id
			this.id = e.id
			if (this.id > 0) {
				// 如果有id，根据id取出对应的工作经历
				let thisCertificate = this.certificateStore.filter(
					item => parseInt(item.id) === parseInt(this.id)
				)
				this.initData(thisCertificate[0])
				// 恢复获得时间
				let starTimeDateArr = this.obtaintime.split('-')
				this.currentDate = new Date(
					parseInt(starTimeDateArr[0]),
					parseInt(starTimeDateArr[1]) - 1
				)
			}
		},
		mounted() {
			this.initDate()
		},
		computed: {
			certificateStore() {
				return this.$store.state.resume.certificate_list
			}
		},
		methods: {
			// 初始化接口返回数据
			initData(interfaceCertificate) {
				this.name = interfaceCertificate.name
				this.obtaintime = this.dateFormat(
					new Date(interfaceCertificate.obtaintime * 1000)
				)
			},
			// 设置日期插件默认值
			initDate() {
				let nowDate = new Date()
				let nowYear = nowDate.getFullYear()
				let minYear = nowYear - 59

				this.minDate = minYear
				this.maxDate = nowYear
				this.currentDate = nowDate
			},
			// 选择获得时间
			onConfirmDate(value) {
				this.obtaintime = value.year + '-' + value.month
				this.showPickerDate = !this.showPickerDate
			},
			// 保存
			handleSubmit() {
				if (!this.name) {
					this.$refs.uTips.show({
						title: '请填写证书名称',
						type: 'error'
					})
					return false
				}
				if (!this.obtaintime) {
					this.$refs.uTips.show({
						title: '请选择获得时间',
						type: 'error'
					})
					return false
				}
				this.disabled = true
				http
					.post(api.resume_certificate_save, {
						id: this.id,
						name: this.name,
						obtaintime: this.obtaintime
					})
					.then(res => {
						if (parseInt(res.data.code) === 200) {
							this.$refs.uTips.show({
								title: res.data.message,
								type: 'success'
							})
							setTimeout(() => {
								uni.navigateBack({
									delta:1
								})
							}, 1500)
						} else {
							this.$refs.uTips.show({
								title: res.data.message,
								type: 'error'
							})
						}
						this.disabled = false
					})
					.catch(err => {
						console.log(err)
					})
			},
			// 删除此证书
			deleteCurrentCertificate() {
				http
					.post(api.resume_certificate_delete, {
						id: this.id
					})
					.then(res => {
						if (parseInt(res.data.code) === 200) {
							this.$refs.uTips.show({
								title: res.data.message,
								type: 'success'
							})
							setTimeout(() => {
								uni.navigateBack({
									delta:1
								})
							}, 500)
						} else {
							this.$refs.uTips.show({
								title: res.data.message,
								type: 'error'
							})
						}
					})
					.catch(err => {
						console.log(err)
					})
			},
			// 格式化日期
			dateFormat(time) {
				let year = time.getFullYear()
				let month = time.getMonth() + 1
				return `${year}-${month}`
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box_1 {
		font-size: 26rpx;
		color: #999999;
		text-align: center;
		width: 100%;
		padding: 30rpx 0;
	}

	.box_2 {
		font-size: 26rpx;
		color: #666666;
		padding: 30rpx 32rpx;
		background-color: #f3f3f3;
	}
</style>
